<template>
	<view class="page bg-fff">
		<view class="searchInputWrap">
			<up-search v-model="keyword" placeholder="搜索楼盘/区域/板块" height="40" shape="round" borderColor="#E5E5E5" :showAction="false" bgColor="#FFFFFF" @change="clickSearch" @search="clickSearch"></up-search>
		</view>

		<view v-if="listData.length > 0">
			<block v-for="(item, index) in listData" :key="index">
				<CardItem :detail="item" />
			</block>
			<u-loadmore :status="loadingType" margin-top="30" />
		</view>
		
		<up-empty text="暂无数据" mode="list" marginTop="100" v-if="listData.length === 0"></up-empty>

		<view class="disclaimer left-15 right-15 font12 col-grey top-20">免责声明：具体数据以房地产交易中心公示为准，小程序仅提供楼盘的相关信息，仅做参考.</view>
		<up-gap height="40"></up-gap>
	</view>
</template>

<script setup>
import CardItem from './components/card-item.vue';
import { ref } from 'vue';
import { onLoad, onShareAppMessage, onShareTimeline, onReachBottom } from '@dcloudio/uni-app';
import { useUserInfoStore } from '@/store/index';
import { getKuCunAPI } from '@/common/api/houses';

const userInfoStore = useUserInfoStore();

// 搜索关键字
let keyword = ref('');

//列表
let listData = ref([]);
let next = ref('');
let loadingType = ref('loadmore');

// 页面加载
onLoad((options) => {
	uni.$check_and_login(init)
})

// 分享到好友
onShareAppMessage(() => {
	return {
		title: '库存汇总',
		path: `/pages/products/ku-cun/index?puid=${userInfoStore.userInfo.id}`
	}
})

// 分享到朋友圈
onShareTimeline(() => {
	return {
		title: '库存汇总',
		query: `puid=${userInfoStore.userInfo.id}`
	}
})

// 监听页面滚动到底部
onReachBottom(() => {
	if (loadingType.value === 'loadmore') {
		init();
	}
});

// 初始化
async function init(isRefresh = false) {
	if (isRefresh) {
		loadingType.value = 'loadmore';
		next.value = '';
	}
	if (loadingType.value === 'loading' || loadingType.value === 'nomore') return;

	try {
		loadingType.value = 'loading';
		let url = (next.value ? next.value : `/product/mall/v6/pan/size/remain?keyword=${keyword.value}`);
		const res = await getKuCunAPI(url);
		if (res.status !== 0) {
			uni.$u.toast(res.detail);
			return
		}
		if (isRefresh) {
			listData.value = res.detail.results;
		} else {
			listData.value.push(...res.detail.results);
		}
		next.value = res.detail.next;
		loadingType.value = res.detail.next ? 'loadmore' : 'nomore';
	} catch (error) { }
}

// 点击搜索
function clickSearch() {
	init(true);
}
</script>

<style lang="scss" scoped>
.page{
	min-height: 100vh;
	overflow: hidden;
	.searchInputWrap{
		margin: 40rpx 28rpx 0 28rpx;
	}
}
</style>